<template>
    <div>
        <Tabs type="card" closable @on-tab-remove="handleTabRemove" v-model="view=selectName">
            <TabPane label="产品首页" v-if="tab0" name="product">
                <div class="layout-content">
                    <Row>
                        <Col span="5">
                        <Menu active-name="1-2" width="auto" :open-names="['1']">
                            <Tree :data="data1" ref="tree" @on-select-change="selectChange"></Tree>
                        </Menu>
                        </Col>
                        <Col span="19">
                        <div class="layout-content-main">

                            <Input v-model="filter.name">
                            <Button slot="append" icon="ios-search" @click="Search"></Button>
                            </Input>
                            <br>
                            <Button type="info" @click="add">添加数据</Button>
                            <Button type="error" @click="deletes">删除多条数据</Button>
                            <br><br>
                            <!--表格-->
                            <Table border :columns="columns" :data="filter.list"
                                   @on-selection-change="onSelectionChange"></Table>

                            <!--分页-->
                            <Page :total="filter.total" size="small" show-total show-elevator show-sizer
                                  @on-change="pageChange"
                                  @on-page-size-change="pageSizeChange"></Page>



                        </div>
                        </Col>
                    </Row>
                </div>
            </TabPane>

            <!--评论-->
            <TabPane v-for="tab in tabs" :key="tab" :label="'评论'" name='comment'>
                <!--<router-view></router-view>-->
                <h3 style="float:left">产品名称:</h3><p v-model='formValidate.title' style="float:left;font-size:15px;margin-left:5px">{{formValidate.name}}</p>
                <br><br>
                <h3>产品描述:</h3><br>

                <p v-html='formValidate.description' style="text-indent:10px;font-size:14px"></p>
                <br/>
                <h3 style="float:left">产品价格:</h3><p v-model='formValidate.price' style="float:left;font-size:15px;margin-left:5px">{{formValidate.price}}元</p>
                <br/><br>
                <h3 style="float:left">产品展示:</h3>
                <ul style="overflow: hidden;">
                    <li v-for=' path in paths' style="float:left;marginLeft:5px">
                        <img :src="path" style="height:60px">
                    </li>
                </ul>
                <br><br>

                <Button type="info" @click="addComment">添加数据</Button>
                <Button type="error" @click="deletesComment">删除多条数据</Button>
                <br/><br>

                <!--表格-->
                <Table border :columns="columnComment" :data="commentFilter.list"
                       @on-selection-change="onSelectionChange"></Table>

                <!--分页-->
                <Page :total="commentFilter.total" size="small" show-total show-elevator show-sizer
                      @on-change="pageChangeCom"
                      @on-page-size-change="pageSizeChangeCom"></Page>

            </TabPane>

        </Tabs>




        <!--新闻提示框-->
        <Modal
                v-model="modal"
                title="数据操作"
                width='800px'
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="产品名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入产品名"></Input>
                </FormItem>
                <FormItem label="产品描述" prop="description">
                    <quill-editor
                            ref="myQuillEditor"
                            v-model="formValidate.description"
                    >
                    </quill-editor>
                </FormItem>

                <FormItem label="产品价格" prop="price">
                    <Input v-model="formValidate.price" placeholder="请输入产品价格"></Input>
                </FormItem>

                <FormItem label="图片">
                    <Button type="primary" @click='uploadPic'>上传图片</Button>
                    <ul style="overflow: hidden;">
                        <li v-for=' path in paths' style="float:left;marginLeft:5px">
                            <img :src="path" style="height:60px">
                        </li>
                    </ul>
                </FormItem>



                <FormItem label="选择日期">
                    <Row>
                        <Col span="11">
                        <FormItem prop="date">
                            <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
                        </FormItem>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>

        <!--评论提示框-->
        <Modal
                v-model="modalComment"
                title="数据操作"
                width='800px'
        >
            <Form ref="formValidateCom" :model="formValidateCom" :rules="ruleValidateCom" :label-width="80">
                <FormItem label="用户名" prop="user">
                    <Input v-model="formValidateCom.user" placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <quill-editor
                            ref="myQuillEditor"
                            v-model="formValidateCom.content"
                    >
                    </quill-editor>

                </FormItem>


                <FormItem>
                    <Button type="primary" @click="handleSubmitCom('formValidateCom')">提交</Button>
                    <Button type="ghost" @click="handleResetCom('formValidateCom')" style="margin-left: 8px">重置</Button>
                </FormItem>

            </Form>
        </Modal>


        <!--图片选择-->
        <Modal
                title="图片上传"
                v-model="modal8"
                :closable="false">
            <app-upload></app-upload>
        </Modal>
    </div>
</template>

<script type="text/javascript">
	import Base from './../common/baseUpload';
	import Base1 from './../common/base';
	import {mapGetters,mapActions} from 'vuex';
	import Upload from './Upload.vue';
	export default {
		mixins:[Base,Base1],
		data () {
			return {
				paths:[],
				selectName:'product',
				tab0: true,
				tabs: 0,
				type:"product",
				module1:"cate",
				module:'product',
				modalComment:false,


				//产品表格
				filter: {
					list: [],
					total: 0,
					page: 1,
					rows: 10,
					cateId:'',
					name:''
				},
				//产品表单
				formValidate: {
					name: '',
					description: '',
					price:'',
					date: '',
					commentCount: '',
					pic:[]

				},
				ruleValidate: {
					name: [
						{ required: true, message: '产品名不能为空', trigger: 'blur' }
					],
					description: [
						{ required: true, message: '描述不能为空', trigger: 'blur' }
					]

				},
				//评论表单
				formValidateCom:{
					user:'',
					content:''
				},
				ruleValidateCom:{
					user: [
						{ required: true, message: '用户不能为空', trigger: 'blur' }
					],
					content: [
						{ required: true, message: '内容不能为空', trigger: 'blur' }
					]
				},


				//评论表格
				commentFilter:{
					list: [],
					total: 0,
					page: 1,
					rows: 10,
					cateId:''
				},
				columnComment:[
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: 'user',
						key: 'user'
					},
					{
						title: '内容',
						key: 'content'
					},
					{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.showCom(params.row)
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.removeCom(params.row._id)
										}
									}
								}, '删除')

							]);
						}
					}
				],
                //产品表格
				columns: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '产品名称',
						key: 'name',
						render: (h, params) => {
							return h('div', [
								h('Icon', {
									props: {
										type: 'person'
									}
								}),
								h('strong', params.row.name)
							]);
						}
					},
					{
						title: '产品描述',
						key: 'description',
					},
					{
						title: '产品价格',
						key: 'price',
					},
					{
						title: '评论数',
						key: 'commentCount'
					},
					{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.row)

										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									slot:"extra",
									on: {
										click: () => {
											this.paths =[];

											for(var i=0;i<params.row.pic.length;i++){
												this.paths.push('http://localhost:3000/'+params.row.pic[i].filename) ;
											}

											Object.assign(this.formValidate,params.row)
//												console.log(this.formValidate);
											if(this.tabs>0){
												this.tabs = this.tabs-1;
											}
											//打开选项卡
											this.handleTabsAdd();
											//选中新增的tab
											this.selectName = 'comment';
//												console.log(params.row._id);
											this.commentFilter.cateId  = params.row._id;
//												console.log(this.commentFilter);
											this.getDataComment();
										}
									}
								}, '评论'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row._id)
										}
									}
								}, '删除')

							]);
						}
					}
				]

			}

		},
		components:{
			appUpload:Upload
		},
		computed:{
			...mapGetters(['modal8','value']),
		},
		watch:{
			value(news,old){
				console.log(news);
				this.paths.push('http://localhost:3000/'+news.filename);
//				console.log(this.path);
				this.formValidate.pic.push(news);

			}
		},
		methods: {
			...mapActions(['checkmodal8']),

			getDataComment(){
				this.$http.post('http://localhost:3000/comment/list',this.commentFilter)
					.then(res=>{
						this.commentFilter.list = res.data.rows;
						this.commentFilter.total = res.data.total;
						this.commentFilter.page = res.data.page;
					})
			},
			addComment(){
				this.modalComment = true;
				this.formValidateCom = this.$options.data().formValidateCom;
				this.formValidateCom.cateId = this.commentFilter.cateId;
//				console.log(this.$options.data());
//                对象合并，并且初始表单数据

				delete(this.$data.formValidateCom._id);
			},
			deletesComment(){
				this.$Modal.confirm({
					title: '确认删除数据',
					content: '<p>确认删除该数据吗</p>',
					onOk: () => {
						this.$Message.info('删除成功');
						this.$http.post(`http://localhost:3000/comment/deletes`, {ids: this.ids.toString()})
							.then(res => {
								this.getDataComment();
							})
					},
					onCancel: () => {
					}
				});
			},

			handleSubmitCom (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {

						if (this.formValidateCom._id && this.formValidateCom._id.length > 0) {
							//修改
							this.$http.put(`http://localhost:3000/comment/data/${this.formValidateCom._id}`, this.formValidateCom)
								.then(res => {
									this.$Message.success('提交成功!');
									this.$refs[name].resetFields();
									this.modalComment = false;
									this.getDataComment();

								})
						} else {
							//添加
							this.$http.post(`http://localhost:3000/comment/data`, this.formValidateCom)
								.then(res => {
									this.$Message.success('提交成功!');
									this.$refs[name].resetFields();
									this.modalComment = false;
									this.getDataComment();
									this.getData();
//									delete this.formValidateCom.cateId;
//                                    /*清空表单*/
//									Object.assign(this.$data.formValidateCom,this.$options.data().formValidateCom)
								})
						}

					} else {
						this.$Message.error('表单验证失败!');
					}
				})
			},
			handleResetCom (name) {
				this.$refs[name].resetFields();
			},

			showCom(row){
				this.modalComment = true;
				Object.assign(this.$data.formValidateCom, row);
			},

			removeCom(id){
				this.$Modal.confirm({
					title: '确认删除数据',
					content: '<p>确认删除该数据吗</p>',
					onOk: () => {
						this.$Message.info('删除成功');
						this.$http.delete(`http://localhost:3000/comment/data/${id}`)
							.then((res) => {
								console.log(res);
								this.getDataComment();
							})
					},
					onCancel: () => {
					}
				});
			},
			pageChangeCom(page){
				this.commentFilter.page = page;
				this.getDataComment();
			},
			pageSizeChangeCom(pagesize){
				this.commentFilter.rows = pagesize;
				this.getDataComment();
			},



			//上传图片
			uploadPic(){
				this.checkmodal8(true);
			},
			//删除tab
			handleTabRemove (name) {
				this.tabs =this.tabs - 1;
				this['tab' + name] = false;
			},
			//添加tab
			handleTabsAdd () {
				this.tabs ++;
//				this.$router.push('/new/comment')
			},
			show (row) {
//				console.log(row);
				this.modal = true;
				Object.assign(this.$data.formValidate, row);
				console.log(row);
				this.paths =[];
				for(var i=0;i<row.pic.length;i++){
					this.paths.push('http://localhost:3000/'+row.pic[i].filename) ;
                }

//				console.log(this.$data.formValidate, row);
			},
			//新闻提交
			handleSubmit (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {

						if (this.formValidate._id && this.formValidate._id.length > 0) {
							//修改
							this.$http.put(`http://localhost:3000/${this.module}/data/${this.formValidate._id}`, this.formValidate)
								.then(res => {
									this.$Message.success('提交成功!');
									this.$refs[name].resetFields();
									this.modal = false;
									this.getData();

								})
						} else {
							//添加

							this.$http.post(`http://localhost:3000/${this.module}/data`, this.formValidate)
								.then(res => {
									this.$Message.success('提交成功!');
									this.$refs[name].resetFields();
									this.modal = false;
									this.getData();
//									delete this.formValidate.cateId;

								})
						}

					} else {
						this.$Message.error('表单验证失败!');
					}
				})
			},

			//新闻添加
			add(){
				console.log(this.formValidate.cateId);
//				console.log(this.formValidate.cateId==''|| this.formValidate.cateId == undefined);
				if(this.formValidate.cateId==''|| this.formValidate.cateId == undefined){
					this.$Modal.error({
						title: '提醒',
						content: '请选择你要添加产品的类别'
					});
				}else{
					this.paths=[];
					//                对象合并，并且初始表单数据
					let a = this.formValidate.cateId;
					this.formValidate = this.$options.data().formValidate;
					this.formValidate.cateId = a;
					this.modal = true;
					delete(this.$data.formValidate._id);
				}


			},
			//新闻删除
			remove (id) {
				this.$Modal.confirm({
					title: '确认删除数据',
					content: '<p>确认删除该数据吗</p>',
					onOk: () => {
						this.$Message.info('删除成功');
						this.$http.delete(`http://localhost:3000/${this.module}/data/${id}`)
							.then((res) => {
								this.getData();
							})
					},
					onCancel: () => {
					}
				});
			},


			//新闻的getdata
			getData(){
				this.$http.post(`http://localhost:3000/${this.module}/list`, this.filter)
					.then(res => {
//						console.log(res.data);
						this.filter.list = res.data.rows;
						this.filter.total = res.data.total;
						this.filter.page = res.data.page;
					})
			},

			//树选中
			selectChange(row){
//				console.log(row);
				if(row &&row.length>0){
					let id = row[0]._id;
//					console.log(id);
					this.$http.post(`http://localhost:3000/cate/id/${id}`)
						.then(res=>{
							this.filter.cateId = JSON.stringify(res.data);
							this.getData();
						})
					this.formValidate.cateId = id;
					console.log(this.formValidate.cateId);
				}

			}

		}


	}

</script>